<template>
    <div class="section-wrap lubiao-detail-wrap">
        <!-- 折叠 -->
        <a-collapse v-model:activeKey="activeKey" :bordered="false" v-if="collapse" @change="handleChange">
            <template #expandIcon="{ isActive }">
                <CaretRightOutlined style="color: #bec1c6" :rotate="isActive ? 90 : 0" />
            </template>
            <a-collapse-panel key="1" :style="customStyle">
                <template #header>
                    <div style="font-size: 14px; flex: 1; overflow: hidden">
                        <span v-if="title">{{ title }}</span>
                        <slot name="title" v-else />
                    </div>
                </template>
                <slot />
                <template #extra>
                    <slot name="titleExtra" />
                </template>
            </a-collapse-panel>
        </a-collapse>
        <!-- 不折叠 -->
        <div class="section-cont" v-else>
            <flexbox align="center" class="section-header">
                <div class="section-header-title">
                    <span v-if="title">
                        {{ title }}
                    </span>
                    <slot name="title" v-else />
                </div>
                <div class="section-header-action">
                    <slot name="titleExtra" />
                </div>
            </flexbox>
            <slot />
        </div>
    </div>
</template>

<script>
import { defineComponent, ref, watch } from 'vue';
import { CaretRightOutlined } from '@ant-design/icons-vue';
export default defineComponent({
    components: {
        CaretRightOutlined
    },
    props: {
        title: {
            type: String,
            default: ''
        },
        collapse: {
            type: Boolean,
            default: false
        },
        defaultOpen: {
            type: Boolean,
            default: false
        },
        expanded: {
            type: Boolean,
            default: false
        }
    },
    emits: ['update:expanded', 'change'],
    setup(props, { emit }) {
        const activeKey = ref(['1']);
        const customStyle = 'background: #fff;overflow: hidden;border:0;color: #1f2329;';
        const handleChange = (val) => {
            const expanded = val.includes('1');
            emit('update:expanded', expanded);
            emit('change', expanded);
        };
        activeKey.value = props.defaultOpen ? ['1'] : ['0'];
        watch(
            () => props.expanded,
            (n) => {
                activeKey.value = n ? ['1'] : ['0'];
            }
        );
        return {
            activeKey,
            customStyle,
            handleChange
        };
    }
});
</script>
<style lang="less">
.lubiao-detail-wrap {
    .ant-collapse > .ant-collapse-item > .ant-collapse-header {
        display: flex;
        align-items: center;
        .ant-collapse-extra {
            float: none;
            flex: none;
        }
    }
}
</style>
<style scoped lang="less">
::v-deep(.ant-collapse > .ant-collapse-item > .ant-collapse-header) {
    padding: 0 16px;
    padding-left: 40px;
}
.section-wrap {
    margin-bottom: 4px;
    .section-cont {
        padding: 0 12px;
    }
    .section-header {
        height: 40px;
        margin-bottom: 12px;
        // padding: 24px;
        &-title {
            font-size: 14px;
            color: @title-font-color;
            font-weight: bold;
        }
        &-action {
            flex: 1;
        }
    }
}
</style>